import React from 'react'
import {Menu,Button,Dropdown,Input,Row,Col,Popconfirm,Modal,message} from 'antd';
import { DownOutlined, UserOutlined,EllipsisOutlined } from '@ant-design/icons';
import axios from 'axios'
import './css/ProductsList.css'
import { Table } from 'antd';
import {Link,withRouter} from 'react-router-dom'
const {Search} = Input
const menu = (
    <Menu>
        <Menu.Item key="1">
            <UserOutlined />
            1st menu item
        </Menu.Item>
        <Menu.Item key="2">
            <UserOutlined />
            2nd menu item
        </Menu.Item>
        <Menu.Item key="3">
            <UserOutlined />
            3rd item
        </Menu.Item>
    </Menu>
);

const pageNation = {
    position:['bottomRight'],
    pageSize:10,
    size:'small',
    total:7,
    showQuickJumper:true,
    backgroundColor:'#4BD0B6',
}

class ProductsList extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            selectedRowKeys: [],
            loading: false,
            visible:false,
            data:[],
            myDepot:[],
            depotSelectValue:'全部仓库',
            oldStockMax:0,
            oldStockMin:0,
            stockMax:0,
            stockMin:0,
            stockId:''
        }
        this.menu2 = (
            <Menu>
                <Menu.Item key="1">
                    <Link to={{pathname:'ImportProDetails',state:'1'}}>
                        <UserOutlined/>
                        导入商品基础信息
                    </Link>
                </Menu.Item>
                <Menu.Item key="2">
                    <Link to={{pathname:'ImportProDetails',state:'2'}}>
                        <UserOutlined />
                        导入商品订货价
                    </Link>
                </Menu.Item>
                <Menu.Item key="3">
                    <Link to={{pathname:'ImportProDetails',state:'3'}}>
                        <UserOutlined />
                        导入商品客户定价
                    </Link>
                </Menu.Item>
                <Menu.Item key="4">
                    <Link to={{pathname:'ImportProDetails',state:'4'}}>
                        <UserOutlined />
                        导入商品图片
                    </Link>
                </Menu.Item>
            </Menu>
        );
    }

    toDetalis(text){
        let data = this.state.data
        data.map(item=>{
            if(item.key===text||item.name===text){
                this.props.history.push({pathname:'/homepage/productsdetails',query:item})
                return item
            }
        })
    }
    editStockNum(obj){
        this.setState({
            visible: true,
            oldStockMax:obj.stockMax,
            oldStockMin:obj.stockMin,
            stockId:obj.stockId
        });
    }
    details(){
        console.log('明细')
    }
    changeStockMax(e){
        this.setState({
            stockMax:e.target.value
        })
    }
    changeStockMin(e){
        this.setState({
            stockMin:e.target.value
        })
    }
    handleOk = e => {
        let stockId = this.state.stockId
        let stockMax = this.state.stockMax
        let stockMin = this.state.stockMin
        let data = {stockId:stockId,stockMax:stockMax,stockMin:stockMin}
        axios({
            url:'/api/goods/updateStock',
            method:'post',
            data:data
        }).then(res=>{
            if(res.data.code===200){
                message.success('修改成功')
            }
        })
        this.setState({
            visible: false,
        });
    };

    handleCancel = e => {
        this.setState({
            visible: false,
        });
    };
    columns = [
        {
            title: '商品名称',
            align:'center',
            render:record=><span>{record.goods.goodsName}</span>,
            key:'goodsUnitId'
        },
        {
            title: '商品规格',
            render:record=><span>{record.goods.goodsSpecifications}</span>,
            key:'goodsUnitId',
            align:'center',
        },
        {
            title: '单位',
            render:record=><span>{record.goods.goodsUnit.goodsUnitName}</span>,
            key:'goodsUnitId',
            align:'center',
        },
        {
            title: '所属仓库',
            render:record=><span>{record.repository.repositoryName}</span>,
            key:'repositoryId',
            align:'center'
        },
        {
            title: '库存上限',
            dataIndex: 'stockMax',
            align:'center'
        },
        {
            title: '库存下限',
            dataIndex: 'stockMin',
            align:'center'
        },
        {
            title: '预购量',
            dataIndex: 'preOrderNumber',
            sorter: {
                compare: (a, b) => a.key - b.key,
                multiple: 4,
            },
            align:'center'
        },
        {
            title: '在途量',
            dataIndex: 'loadNumber',
            align:'center'
        },
        {
            title: '库存量',
            dataIndex: 'stockNumber',
            sorter: {
                compare: (a, b) => a.key - b.key,
                multiple: 4,
            },
            align:'center'
        },
        {
            title: '可用库存量',
            dataIndex: 'availableStockNumber',
            sorter: {
                compare: (a, b) => a.key - b.key,
                multiple: 4,
            },
            align:'center'
        },
        {
            title: '操作',
            key: 'operation',
            fixed: 'right',
            width: 100,
            align:'center',
            render: (text,record)=> <Popconfirm
                title="请选择您的操作"
                onConfirm={this.details}
                onCancel={()=>this.editStockNum(record)}
                okText="明细"
                cancelText="修改"
            >
                <EllipsisOutlined/>
            </Popconfirm>,
        },
    ];

    onSelectChange = selectedRowKeys => {
        console.log('selectedRowKeys changed: ', selectedRowKeys);
        this.setState({ selectedRowKeys });
    };

    changeName=(name)=>{
        if(!name){
            message.warning('请输入您要搜索的内容')
        }else {
            axios({
                url:'/api/goods/selectStockByCondition',
                method:'post',
                data:{inputValue:name,currentPage:1,perSize:7}
            }).then(res=>{
                console.log(res)
                let data = res.data.data.filter((item)=>{
                    item.key = item.goodsId
                    delete item.goodsId
                    return item
                })
                this.setState({
                    data:data
                })
            })
        }
    }

    depotSelected=(name,id)=>{
        this.setState({
            depotSelectValue:name
        })
        axios({
            url:'/api/goods/selectStockByCondition',
            method:'post',
            data:{selectValue:id,currentPage:1,perSize:7}
        }).then(res=>{
            let data = res.data.data.filter((item)=>{
                item.key = item.goodsId
                delete item.goodsId
                return item
            })
            this.setState({
                data:data
            })
        })
    }
    render() {
        let data = this.state.data;
        let columns = this.columns;
        const { loading, selectedRowKeys } = this.state;
        const rowSelection = {
            selectedRowKeys,
            onChange: this.onSelectChange,
        };
        const hasSelected = selectedRowKeys.length > 0;
        return (
            <div id='headContent'>
                <Row id='orderListHead'>
                    <Col id='leftCol' span={12}>
                        <Dropdown overlay={menu}>
                            <Button>
                                全部分类 <DownOutlined />
                            </Button>
                        </Dropdown>
                        <Dropdown overlay={(<Menu>
                            {this.state.myDepot.map((item,index)=>{
                                return <Menu.Item onClick={()=>this.depotSelected(item.repositoryName,item.key)} key={index}>{item.repositoryName}</Menu.Item>
                            })}
                        </Menu>)}>
                            <Button id='mySelect'>
                                {this.state.depotSelectValue} <DownOutlined />
                            </Button>
                        </Dropdown>
                        <Search id='myInput' onSearch={value => this.changeName(value)}  placeholder="请输入..." />
                    </Col>
                    <Col id='rightCol' span={12}>
                        <Button id='myBtn' style={{color:'white'}}>导出</Button>
                    </Col>
                </Row>
                <Row>
                    <Table id='myTable' pagination={pageNation} columns={columns} dataSource={data} />
                </Row>
                <Row>
                    <Col>
                        <Modal
                            title="修改库存信息"
                            visible={this.state.visible}
                            onOk={this.handleOk}
                            onCancel={this.handleCancel}
                            cancelText='取消'
                            okText='确定'
                            destroyOnClose='true'
                        >
                            <div>
                                <span>库存上限</span>
                                <Input onChange={(value)=>this.changeStockMax(value)} placeholder={this.state.oldStockMax}/>
                            </div>
                            <div>
                                <span>库存下限</span>
                                <Input onChange={(value)=>this.changeStockMin(value)} placeholder={this.state.oldStockMin}/>
                            </div>
                        </Modal>
                    </Col>
                </Row>
            </div>
        );
    }
    componentDidMount() {
        axios({
            url:'/api/goods/selectAllStock',
            method:'post',
            data:{currentPage:1,perSize:7}
        }).then(res=>{
            let data = res.data.data.filter((item)=>{
                item.key = item.goodsId
                delete item.goodsId
                return item
            })
            this.setState({
                data:data
            })
        })
        axios({
            url:'/api/repository/queryRepositoryByPage',
            method:'post',
            data:{currentPage:1,perSize:999}
        }).then(res=>{
            let data = res.data.data.repositoryList.filter((item)=>{
                item.key = item.repositoryId
                delete item.repositoryId
                return item
            })
            let allType = {key:1,repositoryName:'全部仓库'}
            data.unshift(allType)
            this.setState({
                myDepot:data
            })
        })
    }
}

export default withRouter(ProductsList)